<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <base href=".">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>签到</title>
    <link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/http.js"></script>

    <style>
        * {
            font-family: '微软雅黑';
            text-shadow: none;
        }

        h1 {
            text-align: center;
        }

        p span {
            margin-left: 40px;
        }



        h4 {
            margin-left: 20px;
        }

        .div_sginIn {
            margin-top: 10px;
            text-align: center;
            margin-bottom: 100px;

        }

        .div_phone {
            display: block;
            margin: 0px auto;
            width: 85%;
            height: 40px;
        }

        .div_InformationWay {
            display: block;
            margin: 0px auto;
            width: 85%;
            height: 40px;
        }

        .span_sign {
            width: 80%;
            display: block;
            padding: 10px;
            margin: 0px auto;
            font-size: 20px;
        }

        .span_fair {
            display: block;
            width: 80%;
            padding: 15px;
            margin: 0px auto;
        }

        .form-input {
            display: block;
            width: 96%;
            height: 40px;
            border-radius: 4px;
            border: none;
            box-shadow: none;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
            z-index: 10;
        }

        .delay {
            width: 50%;
            height: 25%;
            background: #ffffff;
            position: fixed;
            top: 25%;
            left: 25%;
            z-index: 1000;
            display: none;
            border-radius: 10px;
            text-align: center;
        }

        .delay p {
            margin-top: 50px;
        }

        .img {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 0;
        }

        .img1 {
            left: 0%;
        }

        .img2 {
            left: 23%;
        }

        .img3 {
            left: 46%;
        }

        .img4 {
            left: 69%;
        }

        .img5 {
            left: 92%;
        }

        .span {
            position: absolute;
            top: 200%;
            color: #00a2df;
        }

        .span1 {
            left: -2%;
            font-size: 14px;
        }

        .span2 {
            left: 23%;
            font-size: 14px;
        }

        .span3 {
            left: 44%;
            font-size: 14px;
        }

        .span4 {
            left: 69%;
            font-size: 14px;
        }

        .span5 {
            left: 89%;
            font-size: 14px;
        }

        #imgdiv {
            width: 95%;
            margin: 0 auto;
            position: relative;
            height: 15px;
            border-bottom: 1px solid #c0c0c0;
            overflow: visible;
        }

        .div_progress {
            padding: 1px;
            background: #ffffff;
            width: 90%;
            height: 150px;
            margin: 0 auto;
        }

        .span_progress {
            display: block;
            margin: 20px auto;
            width: 92%;
            color: #a9a9a9;
        }

        .span_color {
            color: #00a2df;
        }

        .div_page {
            min-height: 571px;
            background: rgb(238, 238, 238);
        }
        .div_fair {
            width: 80%;
        }

        .table td {
            border: 1px solid #EEEEEE;
            padding-left: 20px;
            text-align: left;
            height: 40px;
            vertical-align: middle;
        }

        .table td:hover {
            background: #ee721a;
            color: #fff;
        }
        .select_city_table td {
            text-align: center;
        }
        .span_sgin{
            display: block;
            width: 80%;
            border-radius: 4px;
            color: #ffffff;
            background: #ee721a;
            padding: 15px;
            margin: 0px auto;
        }
    </style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">

<div data-role="page" id="sginpage" data-url="sginpage" tabindex="0"
     class="ui-page ui-page-theme-a ui-page-active div_page">
    <div style="position:fixed;left:0;top:0;width:100%;z-index:200;">
        <div data-role="header"
             style="height:43px;background-color:#ee721a;margin-top:-2px;text-align:center;padding:1px" role="banner"
             class="ui-header ui-bar-inherit">
            <p style="font-size: 18px;color:#FFFFFF;margin-top: 8px;">自助签到</p>
        </div>
    </div>
    <div style="height:43px;background-color:#ee721a;"></div>

    <div id="pre-sign">
        <div class="div_phone" style="margin-top: 20px;">
            <input id="joinCode" class="form-input" style="text-align:center" data-role="none" type="number" placeholder="请输入入场码">
        </div>
        <br/>
        <div class="div_sginIn" style="margin-top:40px;">
            <span class="span_sgin pre-sign-button">进&nbsp;&nbsp;入</span>
        </div>
    </div>

    <div id="sign" style="display: none;">
        <div class="div_phone" style="margin-top: 20px;">
            <input class="form-input" id="phone" data-role="none" type="tel" disabled="disabled" placeholder="请输入您的手机号">
        </div>
        <div class="div_fair">
            <span class="span_fair"></span>
            <input id="fair" type="hidden"/>
            <input id="city" type="hidden" value="73"/>
        </div>
        <div class="div_InformationWay" id="div_InformationWay">
            <select id="Select_InformationWay" data-role="none" class="form-input emptySelect">
                <option VALUE="" selected disabled class="emptySelect">请选择面试信息获取途径</option>
                <option VALUE="S_TZ">短信通知</option>
                <option VALUE="W_YY">公众号预约</option>
                <option VALUE="W_GT">微信沟通</option>
                <option VALUE="M_GT">电话沟通</option>
                <option VALUE="P_TJ">朋友推荐</option>
            </select>
        </div>
        <br/>
        <div class="div_sginIn" style="text-align: center;padding: 20px;">
            <span id="sign-button" class="button-div">签&nbsp;&nbsp;到</span>
        </div>
    </div>

    <div class="div_progress">
		<span class="span_progress">
			请在面试现场<span class="span_color">签到</span>，
			根据获得的<span class="span_color">签到号</span>
			依次对所填写的<span class="span_color">志愿</span>进行面试
		</span>
        <div id="imgdiv">
            <img class="img img1" src="../image/signIn_01_03.png" alt=""><span class="span span1">签到</span>
            <img class="img img2" src="../image/signIn_01_05.png" alt=""><span class="span span2">简历</span>
            <img class="img img3" src="../image/signIn_01_07.png" alt=""><span class="span span3">填志愿</span>
            <img class="img img4" src="../image/signIn_01_07.png" alt=""><span class="span span4">面试</span>
            <img class="img img5" src="../image/signIn_01_07.png" alt=""><span class="span span5">到岗</span>
        </div>
    </div>
    <div class="delay"><p>正在签到请稍等...</p></div>
    <div class="overlay"></div>
    <input type="hidden" id="userId">
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var userSession = {};
        common.userSession(function (data) {
            userSession = data;
        });

        var preSign = {};
        var toSign = function () {
            http.get({
                url:  common.sctx + '/recruit/toSign.do',
                success: function (data) {
                    preSign = data;
                    if(preSign.status === 2){
                        setSignInfo(preSign.recruitId, preSign.signNum);
                        window.location.href = common.ctx + "/html/volunteer.html?recruitId="+preSign.recruitId;
                    } else if(preSign.status === 1) {
                        if(preSign.visitSource) {
                            $("#div_InformationWay").hide();
                        }
                        $("#phone").val(userSession.mobile);
                        $("#pre-sign").hide();
                        $("#sign").show();
                    }
                }
            });
        };
        var setSignInfo = function(recruitId, signNum) {
            var signInfo = {recruitId: recruitId, signNum: signNum};
            localStorage.setItem("signInfo", JSON.stringify(signInfo));
        };
        var sign = function (visitSource) {
            var visitSource = preSign.visitSource || visitSource;
            http.post({
                url: common.sctx + "/recruit/sign.do",
                data: {recruitId: preSign.recruitId, channel: preSign.channel, visitSource: visitSource},
                success: function (data) {
                    $(".overlay").hide();
                    $(".delay").hide();
                    setSignInfo(preSign.recruitId, data);
                    window.location.href = common.ctx + "/html/volunteer.html?recruitId="+preSign.recruitId;
                }
            })
        };
        var toPreSign = function () {
            var joinCode = $("#joinCode").val();
            if(!joinCode || joinCode.length !== 4) {
                alert('请输入入场码');
                return;
            }
            http.get({
                url:  common.sctx + '/recruit/execute/'+joinCode+'.do',
                success: function (data) {
                    preSign = data;
                    if(preSign.status === 2){
                        setSignInfo(preSign.recruitId, preSign.signNum);
                        window.location.href = common.ctx + "/html/volunteer.html?recruitId="+preSign.recruitId;
                    } else {
                        if(preSign.visitSource) {
                            $("#div_InformationWay").hide();
                        }
                        $("#phone").val(userSession.mobile);
                        $("#pre-sign").hide();
                        $("#sign").show();
                    }
                }
            });
        };

        $(".pre-sign-button").click(function () {
            toPreSign();
        });

        $("#sign-button").click(function () {
            var sel_way = $("#Select_InformationWay").val();
            var phone = $("#phone").val();
            if ($(".div_phone").is(":visible")) {
                if (!validatePhoneNumber(phone)) {
                    alert('请输入正确的手机号码');
                    $("#phone").focus();
                    return;
                }
            }

            if ($("#Select_InformationWay").is(":visible")) {
                if (!sel_way || sel_way === "0") {
                    alert('请选择面试信息获取渠道！');
                    $("#Select_InformationWay").focus();
                    return;
                }
            }

            $(".select_fair_table").find("tr").each(function () {
                var curCity = $("#city").val();
                var thisCity = $(this).find(".select_span").attr("id");
                if (curCity != thisCity) {
                    $(this).css("display", "none");
                } else {
                    $(this).css("display", "");
                }
            });
            $(".overlay").show();
            $(".sel_fair_content").show();
            sign(sel_way);
        });

        toSign();
    });
</script>


<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
    <span class="ui-icon-loading"></span>
    <h1>loading</h1>
</div>

</body>
</html>